import { defineComponent, watch } from "vue";
import { IFetchPageListConfig, usePage } from "@/hooks/list";
import { List } from "vant";
import { listPageProps } from "./types";

export default defineComponent({
  name: "list-view",
  props: listPageProps,
  setup(props, { expose }) {
    const [list, listConfig] = usePage({
      url: props.url,
      params: props.params,
    });
    watch(
      () => props.params,
      (params) => {
        listConfig.reset(params);
      },
      { deep: true }
    );
    const renderPage = () => {
      const config = listConfig as IFetchPageListConfig;
      return (
        <List
          onLoad={config.next}
          finished={config.finished.value}
          loading={config.loading.value}
          loading-text={"加载中..."}
          finished-text="已经到最后一页了~"
        >
          {props.renderList(list.value)}
        </List>
      );
    };
    expose(listConfig);
    return () => {
      if (list.value.length == 0) return props.renderEmpty();
      return renderPage();
    };
  },
});
